import React from 'react'
//引入css文件
import './index.css'


import { nanoid } from 'nanoid'

export default function Header({ setTodoList, todoList }) {
    //发布事件函数
    const publishHandle = (e) => {
        if (e.keyCode !== 13) return;

        //获取输入的内容,判断是否为空
        const publishValue = e.target.value.trim()
        if (!publishValue) return alert('请输入正确内容');

        //创建新的todo对象
        const newTodo = { id: nanoid(), todo: publishValue, done: false }

        //调用父组件传递过来的改变todolist的方法 把newTodo添加进去
        setTodoList([newTodo, ...todoList])

        //清空输入框
        e.target.value = ''

    }


    return (
        <div className="todo-header">
            <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
        </div>
    )
}